﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模版嵌套</title>
    <link href="styles/site.css" rel="stylesheet" />
</head>
<body>
    <script id="applicantsTemplate" type="text/x-jquery-tmpl">
        <tr>
            <td>${ID}</td>
            <td>${Name}</td>
            <td>${formatGender(Gender)}</td>
            <td>${formatDate(Birthday)}</td>   
            <td><a href="mailto:${Email}">${Email}</a></td> 
            <td>${TargetCity}</td>
            <td>
                {{tmpl "#skillsTemplate"}}      <!-- 调用模版，并且将当前数据上下文(applicants集合)传递给模版 -->
            </td>
            <td>                                
                {{if Skills}}
                    <ul>
                        {{tmpl(Skills) "#skillTemplate"}} <!-- 调用模版，并且将Skills数据传递给模版作为模版的上下文 -->
                    </ul>
                {{else}}
                    没有记录相关技能
                {{/if}}
            </td>
        </tr>
    </script>
    <script id="skillsTemplate" type="text/x-jquery-tmpl">
        {{if Skills}}
            <ul>
                {{each Skills}}
                    <li>${Name}</li>
                {{/each}}
            </ul>
        {{else}}
            没有记录相关技能
        {{/if}}
    </script>
    <script id="skillTemplate" type="text/x-jquery-tmpl">
        <li><strong>${Name}</strong></li>           <!-- 从Skills数据中，取出每个数据的"Name"。注意，jquery-template会自动遍历每个元素 -->
    </script>
    <div>
        <h2 id="title">应聘员工信息</h2>
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>出生日期</th>
                    <th>期望工作地点</th>
                    <th>技能</th>
                    <th>技能</th>
                </tr>
            </thead>
            <tbody id="applicantsTable">
            </tbody>
        </table>
    </div>

    <script src="scripts/jquery-1.11.0.min.js"></script>
    <script src="scripts/jquery.tmpl.min.js"></script>
    <script type="text/javascript">
        // 定义数据集合
        var applicants = [
           {
               ID: "1001", Name: "Jerry", Gender: 1, Birthday: new Date(1980, 1, 1), TargetCity: "北京", Email: "jerry@etc.com",
               Skills: [{ Name: ".NET" }, { Name: "C++" }, { Name: "网络管理" }]
           },
           {
               ID: "1002", Name: "Jam", Gender: 0, Birthday: new Date(1983, 12, 31), TargetCity: "北京", Email: "jam@etc.com",
               Skills: [{ Name: "Java" }, { Name: "HTML" }]
           },
           {
               ID: "1003", Name: "David", Gender: 1, Birthday: new Date(1974, 3, 7), TargetCity: "广州", Email: "david@etc.com",
               Skills: [{ Name: ".NET" }, { Name: "数据库" }, { Name: "系统架构" }]
           },
           {
               ID: "1004", Name: "Tom", Gender: 1, Birthday: new Date(1972, 5, 12), TargetCity: "上海", Email: "tom@etc.com",
               // 此对象没有"Skills"属性
           }
        ];

        $(function () {
            $.tmpl(applicantsTemplate, applicants).appendTo('#applicantsTable');
        });

        function formatDate(date) {
            return date.toLocaleDateString();
        }

        function formatGender(gender) {
            return gender == 1 ? "男" : "女";
        }
    </script>
</body>
</html>
